<script lang="ts">
import { defineComponent, h, VNode } from "vue"
export default defineComponent({
    name: 'XtxBread',
    render() {
        // render选项用法
        // 1.去掉template标签，单文件组件
        // 2.返回值就是组件的内容
        // 3.vue2.0中的h函数是render第一个参数传进来的，vue3.0的h函数是导入进来的
        // 4.h函数用来创建VNode元素，第一个参数是标签名，第二个参数是标签的属性对象，第三个参数是子节点

        // 需求
        // 1.创建xtx-bread父容器
        // 2.获取默认插槽内容
        // 3.去除xtx-bread-item组件的i标签，而应该是由render函数来创建
        // 4.遍历插槽中的item,得到一个动态创建的节点，最后一个item不加i标签
        // 5.把动态创建的节点渲染到xtx-bread标签中

        // 获取默认插槽内容
        // 过滤掉注释信息
        const items = this.$slots.default ? this.$slots.default().filter(item => item.type.toString() !== 'Symbol(Comment)') : []
        // 动态创建标签数组
        const dymanicItems: VNode[] = []
        items.forEach((item, i) => {
            dymanicItems.push(item)
            // 如果不是最后一个，就加上一个i标签
            if (i < items.length - 1) dymanicItems.push(h('i', { class: 'iconfont icon-angle-right' }))
        })
        // 渲染
        return h('div', { class: 'xtx-bread' }, dymanicItems)
    }
})
</script>

<style scoped lang='less'>
.xtx-bread {
    display: flex;
    padding: 25px 10px;

    :deep(&-item) {
        a {
            color: #666;
            transition: all .4s;

            &:hover {
                color: @xtxColor;
            }
        }
    }

    :deep(i) {
        font-size: 12px;
        margin-left: 5px;
        margin-right: 5px;
        line-height: 22px;
    }
}
</style>